<template>
	<view class="self-box">
		<cmTab :list="list" @change="tabChange" class="tab-box"></cmTab>
		<view class="main">
			<mapImg ref="mapImg" v-if="isImg"></mapImg>
		</view>
		<timeLine class="time-box" :items="radarItems" ref="timeLine" @change="timeLineCG"></timeLine>
	</view>
</template>
<script>
	import tool from '@/utils/tool.js'
	import indexApi from '@/api/index.js'
	import { toFormData } from '@/utils/util'
	import cmTab from '@/components/common/cmTab.vue'
	import mapImg from '@/components/mapImg/mapImg.vue'
	import timeLine from '@/components/common/timeLine.vue'
	export default {
		name: 'pingtu',
		components: {
			cmTab,
			mapImg,
			timeLine
		},
		data() {
			return {
				list: [
					{
						key: '10000',
						label: '福建拼图'
					},
					// {
					// 	key: '10014',
					// 	label: '东南拼图'
					// },
					{
						key: '10011',
						label: '全国拼图'
					},
					{
						key: '10010',
						label: '华南拼图'
					},
					{
						key: '10013',
						label: '华东拼图'
					}
				],
				imgUrl: '',
				radarItems: [],
				isImg: false
			}
		},
		methods: {
			tabChange(idx, val) {
				this.isImg = false
				this.getData(val.key)
			},
			timeLineCG(idx) {
				this.imgUrl = this.radarItems[idx].url
				this.$refs.mapImg.setImg(this.imgUrl)
			},
			getData(key) {
				const parmas = toFormData({
					p: `{"h":{"p":"10001-sanming"},"b":{"leida":{"count":"8","station_id":${key}}}}`
				})
				indexApi.service(parmas).then((res) => {
					this.isImg = true
					this.radarItems = res.data.b.leida.idex.map((item) => {
						let hour = item.actiontime.match(/(\S*)时/)[1]
						let minute = item.actiontime.match(/时(\S*)分/)[1]
						let obj = {
							desc: `${hour}:${minute}`,
							url: '/api/ftp/' + item.img
						}
						tool.preLoadImg(obj.url)
						return obj
					})
					if (this.radarItems.length > 0) {
						this.$refs.timeLine.setIndex(this.radarItems.length - 1)
					}
				})
			}
		},
		computed: {},
		mounted() {
			this.tabChange(0, this.list[0])
		}
	}
</script>

<style lang="less" scoped>
	.self-box {
		height: 100%;
		width: 100%;

		.tab-box {
			height: 80rpx;
		}

		.main {
			width: 100%;
			height: calc(100% - 160rpx);
		}

		.time-box {
			height: 80rpx;
			background: rgba(0, 0, 0, 0.47);
		}
	}
</style>
